<template>
  <div style="text-align: center">
    <el-col
      :xs="{span:12}"
      :sm="{span:8}"
      :md="{span:4}"
      v-for="app in appList"
      :key="app.id"
    >
      <el-link
        type="primary"
        :href="app.app_href"
        target="_blank"
        :underline="false"
      >
        <font-awesome-icon :icon="app.app_icon"  :size="$store.state.PC ? '5x' : '4x'"/>
      </el-link>
      <p :class="$store.state.PC ? 'PC' : 'mobile'">{{ app.app_name }}</p>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'Technology',
  created() {
    this.importConfig();
  },
  data() {
    return {
      appList: [],
    };
  },
  methods: {
    importConfig() {
      this.importDialogVisible = true;
      let role = localStorage.getItem('role');
      console.log(role);
      if (role === null) {
        role = '管理员';
      }
      this.axios({
        method: 'get',
        url: '/home/app_list/',
        params: {
          app_type: '工艺',
          app_config: true,
          app_role: role,
        },
        timeout: 10000,
      })
        .then((response) => {
          this.appList = response.data;
          console.log(response.data);
        });
      // .catch(() => {
      //   this.showErrorMessage('未获取到数据！');
      // });
    },
  },
};
</script>

<style scoped lang="scss">
a {
  text-decoration: none;
  color: #333;
}
.mobile {
  font-size: 6px;
  height: 42px;
}
.PC {
  font-size: 14px;
}
</style>
